<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>林序3PG模型可视化系统-帮助中心</title>
{#    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">#}
{#    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.1/font/bootstrap-icons.min.css" rel="stylesheet">#}
{#    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>#}
{#    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>#}

    <link href="{{ url_for('static',filename='bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static',filename='bootstrap/bootstrap-icons-1.11.1/bootstrap-icons.min.css') }}" rel="stylesheet">
    <script src="{{ url_for('static',filename='jquery/jquery-3.7.1.min.js') }}"></script>
    <script src="{{ url_for('static',filename='bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <style>
        :root {
            --primary-color: #2E7D32;
            --secondary-color: #81C784;
            --accent-color: #DCEDC8;
            --text-color: #212121;
            --light-text: #757575;
            --light-green: #E8F5E9;
            --dark-green: #1B5E20;
            --amber: #FFD54F;
            --brown: #795548;
            --leaf-green: #66BB6A;
        }

        body {
            background-color: #F8F9FA;
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 53.456v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.344 60h2.83L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.414L60 42.143v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.83zM39.9 16.385l1.414-1.414L30 3.658 18.686 14.97l1.415 1.415 9.9-9.9 9.9 9.9zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413L30 11.8l7.07 7.414v-.002zm-2.827 2.83l1.414-1.416L30 14.97l-5.657 5.657 1.414 1.415L30 17.8l4.243 4.242zm-2.83 2.827l1.415-1.414L30 20.626l-2.828 2.83 1.414 1.414L30 23.456l1.414 1.414zM56.87 59.414L58.284 58 30 29.716 1.716 58l1.414 1.414L30 32.544l26.87 26.87z' fill='%2381c784' fill-opacity='0.07' fill-rule='evenodd'/%3E%3C/svg%3E");
            color: var(--text-color);
            padding: 2rem;
            min-height: 100vh;
        }

        .page-header {
            margin-bottom: 2.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 1.2rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.07);
        }

        .page-title {
            color: var(--primary-color);
            font-weight: 700;
            font-size: 2rem;
            margin-bottom: 0;
            position: relative;
            padding-left: 2.2rem;
        }

        .page-title::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1.8rem;
            height: 1.8rem;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z' fill='%232E7D32'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: contain;
        }

        .search-box {
            display: flex;
            width: 380px;
            position: relative;
        }

        .search-box .form-control {
            padding-right: 40px;
            border-radius: 8px;
            border: 1px solid #E0E0E0;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }

        .search-box .form-control:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 3px rgba(129, 199, 132, 0.25);
        }

        .btn-search {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            border: none;
            background: transparent;
            color: var(--primary-color);
            width: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .help-nav-container {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            margin-bottom: 1.5rem;
        }

        .help-nav-title {
            background-color: var(--light-green);
            color: var(--primary-color);
            padding: 1rem 1.5rem;
            margin: 0;
            font-weight: 600;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
        }

        .help-nav-title i {
            margin-right: 0.5rem;
            font-size: 1.1rem;
        }

        .help-nav-list {
            padding: 0.8rem 0;
        }

        .help-nav-item {
            padding: 0.7rem 1.5rem;
            display: flex;
            align-items: center;
            color: var(--text-color);
            cursor: pointer;
            transition: all 0.3s ease;
            border-left: 4px solid transparent;
        }

        .help-nav-item i {
            margin-right: 0.8rem;
            font-size: 1.1rem;
            color: var(--light-text);
            transition: all 0.3s ease;
        }

        .help-nav-item:hover {
            background-color: #f8f9fa;
            color: var(--primary-color);
        }

        .help-nav-item:hover i {
            color: var(--primary-color);
        }

        .help-nav-item.active {
            background-color: var(--accent-color);
            color: var(--primary-color);
            border-left: 4px solid var(--secondary-color);
            font-weight: 500;
        }

        .help-nav-item.active i {
            color: var(--primary-color);
        }

        .contact-support {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .contact-support h5 {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
        }

        .contact-support h5 i {
            margin-right: 0.5rem;
        }

        .contact-support p {
            color: var(--light-text);
            font-size: 0.9rem;
            margin-bottom: 1.2rem;
        }

        .help-content {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            padding: 2rem;
            margin-bottom: 1.5rem;
        }

        .help-section {
            display: none;
        }

        .help-section.active {
            display: block;
        }

        .help-section-header {
            margin-bottom: 2rem;
        }

        .help-section-header h2 {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
        }

        .help-section-header h2 i {
            margin-right: 0.8rem;
            font-size: 1.6rem;
        }

        .section-desc {
            color: var(--light-text);
            font-size: 1.1rem;
            max-width: 700px;
        }

        .help-card {
            background-color: #FBFBFB;
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 2rem;
            border-left: 4px solid var(--secondary-color);
        }

        .help-card h3 {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 1rem;
            font-size: 1.4rem;
        }

        .help-card p {
            margin-bottom: 1rem;
            line-height: 1.6;
        }

        .step-guide {
            margin-top: 1.5rem;
        }

        .step-item {
            display: flex;
            margin-bottom: 1.5rem;
            position: relative;
        }

        .step-number {
            width: 36px;
            height: 36px;
            background-color: var(--light-green);
            color: var(--primary-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.1rem;
            margin-right: 1rem;
            flex-shrink: 0;
            position: relative;
            z-index: 2;
        }

        .step-item:not(:last-child)::after {
            content: "";
            position: absolute;
            top: 36px;
            left: 18px;
            bottom: -36px;
            width: 2px;
            background-color: var(--accent-color);
            z-index: 1;
        }

        .step-content {
            flex: 1;
        }

        .step-content h4 {
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
            font-size: 1.15rem;
        }

        .step-content p {
            color: var(--text-color);
            margin-bottom: 0;
        }

        .ui-guide {
            margin-top: 1rem;
        }

        .ui-item {
            margin-bottom: 1.2rem;
        }

        .ui-item h4 {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 0.5rem;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
        }

        .ui-item h4 i {
            margin-right: 0.5rem;
        }

        .ui-item p {
            color: var(--text-color);
            margin-bottom: 0;
            margin-left: 1.7rem;
        }

        .video-tutorials {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-top: 1rem;
        }

        .video-item {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .video-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        }

        .video-thumbnail {
            background-color: var(--light-green);
            height: 150px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--primary-color);
            position: relative;
        }

        .video-thumbnail i {
            font-size: 3rem;
            margin-bottom: 0.5rem;
        }

        .video-thumbnail span {
            font-weight: 600;
        }

        .video-item p {
            padding: 1rem;
            margin: 0;
            font-size: 0.9rem;
            color: var(--light-text);
        }

        .faq-list {
            margin-top: 1rem;
        }

        .faq-item {
            margin-bottom: 1rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            padding-bottom: 1rem;
        }

        .faq-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .faq-question {
            display: flex;
            align-items: center;
            cursor: pointer;
            padding: 0.5rem 0;
        }

        .faq-question i:first-child {
            color: var(--secondary-color);
            font-size: 1.2rem;
            margin-right: 0.8rem;
        }

        .faq-question h4 {
            margin: 0;
            flex: 1;
            font-weight: 600;
            font-size: 1.1rem;
            color: var(--primary-color);
        }

        .faq-toggle {
            color: var(--light-text);
            transition: transform 0.3s ease;
        }

        .faq-question.active .faq-toggle {
            transform: rotate(180deg);
        }

        .faq-answer {
            padding: 0.5rem 0 0.5rem 2.8rem;
            display: none;
        }

        .faq-item.active .faq-answer {
            display: block;
        }

        .faq-answer p {
            margin: 0;
            color: var(--light-text);
        }

        .feedback-section {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            padding: 1.5rem;
            margin-top: 2rem;
        }

        .feedback-section h4 {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 0.3rem;
        }

        .feedback-section p {
            color: var(--light-text);
            font-size: 0.9rem;
            margin-bottom: 0;
        }

        @media (max-width: 991.98px) {
            .page-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .search-box {
                width: 100%;
                margin-top: 1rem;
            }

            .help-content {
                padding: 1.5rem;
            }

            .video-tutorials {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 767.98px) {
            body {
                padding: 1rem;
            }

            .page-title {
                font-size: 1.6rem;
            }

            .help-section-header h2 {
                font-size: 1.4rem;
            }

            .section-desc {
                font-size: 1rem;
            }

            .help-card {
                padding: 1.2rem;
            }

            .feedback-section {
                text-align: center;
            }

            .feedback-section .text-end {
                text-align: center !important;
                margin-top: 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="container-fluid p-0">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">帮助中心</h1>
            <div class="search-box">
                <input type="text" class="form-control" placeholder="搜索帮助内容...">
                <button class="btn btn-search">
                    <i class="bi bi-search"></i>
                </button>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="row">
            <!-- 左侧帮助导航 -->
            <div class="col-lg-3">
                <div class="help-nav-container">
                    <h5 class="help-nav-title">
                        <i class="bi bi-book"></i> 帮助导航
                    </h5>
                    <div class="help-nav-list">
                        <div class="help-nav-item active" data-target="getting-started">
                            <i class="bi bi-rocket-takeoff"></i> 入门指南
                        </div>
                        <div class="help-nav-item" data-target="project-management">
                            <i class="bi bi-folder2-open"></i> 项目管理
                        </div>
                        <div class="help-nav-item" data-target="tree-params">
                            <i class="bi bi-tree"></i> 树种参数
                        </div>
                        <div class="help-nav-item" data-target="climate-data">
                            <i class="bi bi-cloud"></i> 气候数据
                        </div>
                        <div class="help-nav-item" data-target="model-simulation">
                            <i class="bi bi-graph-up"></i> 模型模拟
                        </div>
                        <div class="help-nav-item" data-target="faq">
                            <i class="bi bi-question-circle"></i> 常见问题
                        </div>
                    </div>
                </div>

                <div class="contact-support">
                    <h5><i class="bi bi-headset"></i> 联系我们</h5>
                    <p>电子邮件地址：finmzhao@163.com</p>
                    <a href="mailto:finmzhao@163.com" class="btn btn-outline-primary btn-sm">
                        <i class="bi bi-envelope"></i> 发送邮件
                    </a>
                </div>
            </div>

            <!-- 右侧帮助内容 -->
            <div class="col-lg-9">
                <div class="help-content">
                    <!-- 入门指南部分 -->
                    <div class="help-section active" id="getting-started">
                        <div class="help-section-header">
                            <h2><i class="bi bi-rocket-takeoff"></i> 入门指南</h2>
                            <p class="section-desc">快速了解林序3PG模型可视化系统的基本功能和操作流程</p>
                        </div>

                        <div class="help-card">
                            <h3>系统简介</h3>
                            <p>林序3PG模型可视化系统是一个基于3-PG（Physiological Principles Predicting Growth）森林生长模型的可视化平台，旨在帮助林业研究人员、森林管理者和生态学家更直观地预测和分析树木生长情况。</p>
                            <p>本系统整合了树种参数管理、气候数据录入、生长模拟和结果可视化等功能，为用户提供一站式的森林生长模拟解决方案。</p>
                        </div>

                        <div class="help-card">
                            <h3>快速上手</h3>
                            <div class="step-guide">
                                <div class="step-item">
                                    <div class="step-number">1</div>
                                    <div class="step-content">
                                        <h4>创建项目</h4>
                                        <p>在"项目"页面，点击"新建项目"按钮，填写项目基本信息，包括项目名称和描述等。</p>
                                    </div>
                                </div>

                                <div class="step-item">
                                    <div class="step-number">2</div>
                                    <div class="step-content">
                                        <h4>选择或添加树种参数</h4>
                                        <p>在"树种参数"页面，可以编辑已有的树种或添加新的树种参数，作为3PG模型计算的输入。</p>
                                    </div>
                                </div>

                                <div class="step-item">
                                    <div class="step-number">3</div>
                                    <div class="step-content">
                                        <h4>添加气候数据</h4>
                                        <p>在"气候数据"页面，自定义气候观测站数据，包括气温、降水和太阳辐射等。</p>
                                    </div>
                                </div>

                                <div class="step-item">
                                    <div class="step-number">4</div>
                                    <div class="step-content">
                                        <h4>运行模拟</h4>
                                        <p>返回项目页面，选择您创建的项目，设置模拟参数后点击"运行模拟"按钮，开始运行。</p>
                                    </div>
                                </div>

                                <div class="step-item">
                                    <div class="step-number">5</div>
                                    <div class="step-content">
                                        <h4>查看结果</h4>
                                        <p>模拟完成后，系统会自动生成可视化图表和数据报告，您可以导出这些结果。</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="help-card">
                            <h3>系统界面介绍</h3>
                            <div class="ui-guide">
                                <div class="ui-item">
                                    <h4><i class="bi bi-window"></i> 顶部标题栏</h4>
                                    <p>显示系统名称和用户信息，右侧提供登出功能。</p>
                                </div>

                                <div class="ui-item">
                                    <h4><i class="bi bi-list"></i> 左侧菜单栏</h4>
                                    <p>包含项目、数据（树种参数和气候数据）以及帮助等主要功能菜单。</p>
                                </div>

                                <div class="ui-item">
                                    <h4><i class="bi bi-laptop"></i> 主内容区</h4>
                                    <p>根据选择的功能菜单显示相应的内容和操作界面。</p>
                                </div>
                            </div>
                        </div>

                        <div class="help-card">
                            <h3>视频教程</h3>
                            <div class="video-tutorials">
                                <div class="video-item">
                                    <div class="video-thumbnail">
                                        <i class="bi bi-play-circle"></i>
                                        <span>系统概述</span>
                                    </div>
                                    <p>了解林序3PG模型可视化系统的核心功能和工作流程</p>
                                </div>

                                <div class="video-item">
                                    <div class="video-thumbnail">
                                        <i class="bi bi-play-circle"></i>
                                        <span>创建首个项目</span>
                                    </div>
                                    <p>详细演示如何创建和配置您的第一个森林生长模拟项目</p>
                                </div>

                                <div class="video-item">
                                    <div class="video-thumbnail">
                                        <i class="bi bi-play-circle"></i>
                                        <span>数据导入指南</span>
                                    </div>
                                    <p>学习如何批量导入树种参数和气候数据</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 项目管理部分 (隐藏) -->
                    <div class="help-section" id="project-management">
                        <div class="help-section-header">
                            <h2><i class="bi bi-folder2-open"></i> 项目管理</h2>
                            <p class="section-desc">学习如何创建、编辑和管理您的模拟项目</p>
                        </div>

                        <div class="help-card">
                            <h3>创建新项目</h3>
                            <p>项目是林序3PG模型可视化系统的核心组织单元，用于管理特定森林模拟场景的所有相关数据和结果。</p>
                            <!-- 内容省略 -->
                        </div>

                        <div class="help-card">
                            <h3>项目设置</h3>
                            <p>在项目详情页面，您可以调整多种设置来优化您的模拟效果。</p>
                            <!-- 内容省略 -->
                        </div>
                    </div>

                    <!-- 树种参数部分 (隐藏) -->
                    <div class="help-section" id="tree-params">
                        <div class="help-section-header">
                            <h2><i class="bi bi-tree"></i> 树种参数</h2>
                            <p class="section-desc">了解如何添加、编辑和管理树种参数，作为3PG模型计算的输入。</p>
                        </div>

                        <div class="help-card">
                            <h3>参数简介</h3>
                            <p>树种参数是3-PG模型中最关键的输入数据之一，它们决定了模型对不同树种生长特性的模拟精度。</p>
                            <p>完善的树种参数设置可以使模型更准确地预测特定树种在不同环境条件下的生长情况，从而为林业管理提供科学依据。</p>
                        </div>

                        <div class="help-card">
                            <h3>添加新树种</h3>
                            <div class="step-guide">
                                <div class="step-item">
                                    <div class="step-number">1</div>
                                    <div class="step-content">
                                        <h4>进入树种参数页面</h4>
                                        <p>点击左侧导航栏中的"树种参数"选项，进入树种参数管理界面。</p>
                                    </div>
                                </div>

                                <div class="step-item">
                                    <div class="step-number">2</div>
                                    <div class="step-content">
                                        <h4>添加新树种</h4>
                                        <p>点击页面上方的"添加树种参数"按钮，在弹出的对话框中输入树种名称。系统会创建一个包含默认参数值的树种模板。</p>
                                    </div>
                                </div>

                                <div class="step-item">
                                    <div class="step-number">3</div>
                                    <div class="step-content">
                                        <h4>编辑树种参数</h4>
                                        <p>新树种创建后，点击树种卡片上的"编辑"按钮进入参数编辑页面，根据实际情况调整各项参数值。</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="help-card">
                            <h3>参数分类</h3>
                            <p>系统将树种参数分为以下几个主要类别，方便用户进行有针对性的设置：</p>
                            <div class="ui-guide">
                                <div class="ui-item">
                                    <h4><i class="bi bi-distribute-vertical"></i> 生物量分配与周转</h4>
                                    <p>包括叶与茎的分配比、生物量与直径关系、NPP分配到根的比例等参数，以及落叶和根系周转相关参数。</p>
                                </div>

                                <div class="ui-item">
                                    <h4><i class="bi bi-graph-up-arrow"></i> NPP与导度修正</h4>
                                    <p>控制温度、霜冻、土壤水分、CO2浓度等环境因子对净初级生产力的影响，以及与树龄、养分相关的修正参数。</p>
                                </div>

                                <div class="ui-item">
                                    <h4><i class="bi bi-tree"></i> 茎干死亡率与自疏</h4>
                                    <p>包括不同生长阶段的死亡率、自疏规则相关参数，以及死亡树木生物量的处理方式。</p>
                                </div>

                                <div class="ui-item">
                                    <h4><i class="bi bi-layers"></i> 冠层结构与过程</h4>
                                    <p>控制比叶面积、光拦截、生产力和冠层导度等参数，这些参数直接影响树木对光能的利用效率。</p>
                                </div>

                                <div class="ui-item">
                                    <h4><i class="bi bi-layout-wtf"></i> 木材与林分特性</h4>
                                    <p>包括枝条和树皮比例、木材密度、茎干高度和体积等与木材特性相关的参数。</p>
                                </div>

                                <div class="ui-item">
                                    <h4><i class="bi bi-arrow-left-right"></i> 转换因子</h4>
                                    <p>包括辐射转换、分子量等用于模型计算的基础转换因子。</p>
                                </div>
                            </div>
                        </div>

                        <div class="help-card">
                            <h3>编辑参数技巧</h3>
                            <p>在编辑树种参数时，以下几点建议可以帮助您提高效率和准确性：</p>
                            <div class="ui-guide">
                                <div class="ui-item">
                                    <h4><i class="bi bi-lightbulb"></i> 使用快速导航</h4>
                                    <p>参数编辑页面顶部的快速导航栏可以帮助您快速跳转到不同的参数分类，提高编辑效率。</p>
                                </div>

                                <div class="ui-item">
                                    <h4><i class="bi bi-info-circle"></i> 关注参数单位</h4>
                                    <p>输入参数值时请注意每个参数的单位，如温度(°C)、时间(月、年)、比例值(0-1)等，避免因单位错误导致模拟结果偏差。</p>
                                </div>

                                <div class="ui-item">
                                    <h4><i class="bi bi-check-circle"></i> 参数合理性检查</h4>
                                    <p>系统会自动检查输入参数的合理性，如温度参数必须满足"最低温度 < 最适温度 < 最高温度"的逻辑关系。</p>
                                </div>

                                <div class="ui-item">
                                    <h4><i class="bi bi-arrow-return-right"></i> 使用回车键快速切换</h4>
                                    <p>在填写参数时，按回车键可快速定位到下一个输入框，提高编辑效率。</p>
                                </div>
                            </div>
                        </div>

                        <div class="help-card">
                            <h3>常见问题</h3>
                            <div class="faq-list">
                                <div class="faq-item">
                                    <div class="faq-question">
                                        <i class="bi bi-question-circle"></i>
                                        <h4>如何批量导入树种参数？</h4>
                                        <i class="bi bi-chevron-down faq-toggle"></i>
                                    </div>
                                    <div class="faq-answer">
                                        <p>目前系统尚未提供批量导入功能，但我们计划在未来版本中支持通过CSV或Excel文件批量导入树种参数。您可以通过编辑页面手动输入数据，或联系技术支持寻求协助。</p>
                                    </div>
                                </div>

                                <div class="faq-item">
                                    <div class="faq-question">
                                        <i class="bi bi-question-circle"></i>
                                        <h4>编辑参数时如何判断参数值的合理范围？</h4>
                                        <i class="bi bi-chevron-down faq-toggle"></i>
                                    </div>
                                    <div class="faq-answer">
                                        <p>系统为大多数参数预设了合理的取值范围，超出范围会有警告提示。此外，参数编辑页面的描述信息也会提供参考。如果您不确定参数的合理值，建议查阅相关文献或参考系统中已有的同类树种参数。</p>
                                    </div>
                                </div>

                                <div class="faq-item">
                                    <div class="faq-question">
                                        <i class="bi bi-question-circle"></i>
                                        <h4>修改参数后如何验证其准确性？</h4>
                                        <i class="bi bi-chevron-down faq-toggle"></i>
                                    </div>
                                    <div class="faq-answer">
                                        <p>您可以创建一个测试项目，使用新的树种参数运行短期模拟，然后将模拟结果与已知的实测数据进行比较。如果发现明显偏差，可能需要进一步调整参数。系统也提供参数敏感性分析工具，帮助您识别最关键的参数。</p>
                                    </div>
                                </div>

                                <div class="faq-item">
                                    <div class="faq-question">
                                        <i class="bi bi-question-circle"></i>
                                        <h4>系统会自动保存我的编辑进度吗？</h4>
                                        <i class="bi bi-chevron-down faq-toggle"></i>
                                    </div>
                                    <div class="faq-answer">
                                        <p>系统不会自动保存您的编辑进度。在完成参数编辑后，请确保点击页面底部的"保存修改"按钮提交更改。离开编辑页面前未保存的修改将会丢失。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 气候数据部分 (隐藏) -->
                    <!-- 气候数据部分 -->
                    <div class="help-section" id="climate-data">
                        <div class="help-section-header">
                            <h2><i class="bi bi-cloud"></i> 气候数据</h2>
                            <p class="section-desc">学习如何管理和编辑站点气候数据，为森林生长模拟提供准确的气象输入</p>
                        </div>

                        <div class="help-card">
                            <h3>气候数据概述</h3>
                            <p>气候数据是3-PG模型中不可或缺的输入要素，它们直接影响模拟的森林生长预测结果。系统允许您创建和管理多个气候站点，每个站点包含完整的月度气候参数数据。</p>
                            <p>通过精确的气候数据输入，您可以更准确地预测特定地区的森林生长情况，从而为林业管理决策提供科学依据。</p>
                        </div>

                        <div class="help-card">
                            <h3>添加气候站点数据</h3>
                            <div class="step-guide">
                                <div class="step-item">
                                    <div class="step-number">1</div>
                                    <div class="step-content">
                                        <h4>进入气候数据管理页面</h4>
                                        <p>点击左侧导航栏中的"气候数据"选项，进入气候站点数据管理界面。</p>
                                    </div>
                                </div>

                                <div class="step-item">
                                    <div class="step-number">2</div>
                                    <div class="step-content">
                                        <h4>创建新站点</h4>
                                        <p>点击页面上方的"添加站点气候数据"按钮，在弹出的对话框中输入站点名称。系统会创建一个包含默认气候参数值的站点模板。</p>
                                    </div>
                                </div>

                                <div class="step-item">
                                    <div class="step-number">3</div>
                                    <div class="step-content">
                                        <h4>编辑站点数据</h4>
                                        <p>新站点创建后，点击站点卡片上的"编辑"按钮进入气候数据编辑页面，根据实际气象数据调整各项参数值。</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="help-card">
                            <h3>气候参数类型</h3>
                            <p>系统收集以下几类关键气候参数，这些参数按月度录入，用于驱动3-PG模型的生长模拟计算：</p>
                            <div class="ui-guide">
                                <div class="ui-item">
                                    <h4><i class="bi bi-thermometer-half"></i> 温度数据</h4>
                                    <p>包括月度最高温度和最低温度(℃)，直接影响树木的光合作用、呼吸和生长速率。温度数据还用于计算霜冻影响和蒸腾作用。</p>
                                </div>

                                <div class="ui-item">
                                    <h4><i class="bi bi-cloud-rain"></i> 降水数据</h4>
                                    <p>记录月度降水量(mm)和雨日数(天)，是计算土壤水分平衡和水分胁迫的基础数据，对模拟干旱条件下的树木生长至关重要。</p>
                                </div>

                                <div class="ui-item">
                                    <h4><i class="bi bi-moisture"></i> 蒸发数据</h4>
                                    <p>月度蒸发量(mm)，用于计算水分平衡和植物可利用水分，这是评估水分限制条件下生长的重要参数。</p>
                                </div>

                                <div class="ui-item">
                                    <h4><i class="bi bi-sun"></i> 太阳辐射</h4>
                                    <p>月平均太阳辐射强度(MJ/m²)，是光合作用计算的直接输入，决定了植物能够获取的能量总量。</p>
                                </div>

                                <div class="ui-item">
                                    <h4><i class="bi bi-snow"></i> 霜冻日数</h4>
                                    <p>月度霜冻日数(天)，用于评估低温对树木生长的抑制作用，尤其对于寒冷气候区域的森林生长模拟尤为重要。</p>
                                </div>
                            </div>
                        </div>

                        <div class="help-card">
                            <h3>编辑气候数据技巧</h3>
                            <p>在编辑气候站点数据时，以下几点建议可以帮助您提高数据输入的效率和准确性：</p>
                            <div class="ui-guide">
                                <div class="ui-item">
                                    <h4><i class="bi bi-keyboard"></i> 键盘快捷导航</h4>
                                    <p>可以使用Enter键或方向键在数据表格中快速导航。按Enter键移动到下一个输入框，使用上下左右箭头键在不同的输入框间移动。</p>
                                </div>

                                <div class="ui-item">
                                    <h4><i class="bi bi-graph-up"></i> 实时统计摘要</h4>
                                    <p>页面上方的统计卡片会自动计算并显示年均温、年降水量、年雨日和年平均辐射等关键指标，帮助您快速了解气候特征。</p>
                                </div>

                                <div class="ui-item">
                                    <h4><i class="bi bi-check-circle"></i> 数据合理性检查</h4>
                                    <p>系统会自动检查气候数据的合理性，例如确保最低温度不高于最高温度、降水量不为负值等，提高数据质量。</p>
                                </div>

                                <div class="ui-item">
                                    <h4><i class="bi bi-highlighter"></i> 修改高亮显示</h4>
                                    <p>修改过的数据字段会自动高亮显示，帮助您追踪已经进行的更改，避免遗漏或重复修改。</p>
                                </div>
                            </div>
                        </div>

                        <div class="help-card">
                            <h3>常见问题</h3>
                            <div class="faq-list">
                                <div class="faq-item">
                                    <div class="faq-question">
                                        <i class="bi bi-question-circle"></i>
                                        <h4>如何批量导入气候数据？</h4>
                                        <i class="bi bi-chevron-down faq-toggle"></i>
                                    </div>
                                    <div class="faq-answer">
                                        <p>目前系统尚未提供批量导入功能，但我们计划在未来版本中支持通过CSV或Excel文件批量导入气候数据。您可以通过编辑页面手动输入数据，或联系技术支持寻求协助。</p>
                                    </div>
                                </div>

                                <div class="faq-item">
                                    <div class="faq-question">
                                        <i class="bi bi-question-circle"></i>
                                        <h4>气候数据需要多长时间的记录？</h4>
                                        <i class="bi bi-chevron-down faq-toggle"></i>
                                    </div>
                                    <div class="faq-answer">
                                        <p>系统要求输入完整的一年12个月的气候数据。理想情况下，应使用多年（至少5-10年）气候数据的平均值，以减少年际变化的影响。如果进行长期模拟，可以考虑使用历史气候数据序列或未来气候变化情景数据。</p>
                                    </div>
                                </div>

                                <div class="faq-item">
                                    <div class="faq-question">
                                        <i class="bi bi-question-circle"></i>
                                        <h4>如何确保输入的气候数据准确？</h4>
                                        <i class="bi bi-chevron-down faq-toggle"></i>
                                    </div>
                                    <div class="faq-answer">
                                        <p>建议使用官方气象站的观测数据，或通过插值方法估算研究区域的气候数据。数据输入后，可以通过页面顶部的统计摘要卡片检查年度平均值和总量是否符合实际情况，以发现可能的异常值或输入错误。</p>
                                    </div>
                                </div>

                                <div class="faq-item">
                                    <div class="faq-question">
                                        <i class="bi bi-question-circle"></i>
                                        <h4>如何处理缺失的气候数据？</h4>
                                        <i class="bi bi-chevron-down faq-toggle"></i>
                                    </div>
                                    <div class="faq-answer">
                                        <p>对于缺失的气候数据，可以使用临近月份的平均值、相似气候站点的数据或气候插值模型进行估算。请勿将缺失数据设为零，这可能导致模拟结果严重偏差。必要时，您可以联系气象部门获取更完整的历史观测数据。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 模型模拟部分 (隐藏) -->
                    <!-- 模型模拟部分 -->
                    <div class="help-section" id="model-simulation">
                        <div class="help-section-header">
                            <h2><i class="bi bi-graph-up"></i> 模型模拟</h2>
                            <p class="section-desc">了解如何配置和运行3-PG模型，进行森林生长模拟</p>
                        </div>

                        <div class="help-card">
                            <h3>模型简介</h3>
                            <p>林序3-PG模型是一种基于生理过程的森林生长模型，能够模拟不同环境条件和管理措施下的林分动态。模型基于光合作用、碳分配、水分平衡等生理过程，可预测树木生长、木材产量和生态系统服务等关键指标。</p>
                            <p>系统支持两种模拟模式：单站点模拟和多站点模拟，分别适用于详细的单一林分分析和大区域多林分比较研究。</p>
                        </div>

                        <div class="help-card">
                            <h3>单站点模拟</h3>
                            <p>单站点模拟专注于对单个林分的详细模拟，适合进行精细化研究和管理规划。</p>
                            <div class="step-guide">
                                <div class="step-item">
                                    <div class="step-number">1</div>
                                    <div class="step-content">
                                        <h4>基本信息设置</h4>
                                        <p>在"基本信息"部分，选择站点和树种，这些是模型的核心输入。系统会根据您的选择调用相应的气候数据和树种参数。</p>
                                    </div>
                                </div>

                                <div class="step-item">
                                    <div class="step-number">2</div>
                                    <div class="step-content">
                                        <h4>站点因子配置</h4>
                                        <p>设置纬度、肥力评级、土壤类别、可用土壤水分和大气CO2浓度等关键站点因子，这些参数直接影响模拟的生长条件。</p>
                                    </div>
                                </div>

                                <div class="step-item">
                                    <div class="step-number">3</div>
                                    <div class="step-content">
                                        <h4>初始化设置</h4>
                                        <p>根据您的需求选择初始化方式：初始生物量池、林分质量或幼苗质量。设置种植时间、初始株数、结束年龄等参数，决定模拟的起止条件。</p>
                                    </div>
                                </div>

                                <div class="step-item">
                                    <div class="step-number">4</div>
                                    <div class="step-content">
                                        <h4>设置营林事件</h4>
                                        <p>添加间伐、肥力管理、灌溉和落叶管理等营林事件，模拟不同管理措施对林分生长的影响。每种事件都需要设置对应的年龄和具体参数。</p>
                                    </div>
                                </div>

                                <div class="step-item">
                                    <div class="step-number">5</div>
                                    <div class="step-content">
                                        <h4>运行模型</h4>
                                        <p>点击"运行模型"按钮开始模拟计算。系统会根据您设置的参数进行计算，并生成详细的模拟结果。</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="help-card">
                            <h3>多站点模拟</h3>
                            <p>多站点模拟允许同时对多个林分进行模拟比较，适合区域分析和比较研究。</p>
                            <div class="step-guide">
                                <div class="step-item">
                                    <div class="step-number">1</div>
                                    <div class="step-content">
                                        <h4>基本参数设置</h4>
                                        <p>设置默认树种、结束年龄、种植月份和输出频率等全局参数，这些将应用于所有站点，除非单独为站点指定特定参数。</p>
                                    </div>
                                </div>

                                <div class="step-item">
                                    <div class="step-number">2</div>
                                    <div class="step-content">
                                        <h4>添加站点</h4>
                                        <p>从下拉菜单中选择并添加需要模拟的站点。对于每个站点，您可以选择性地配置特定参数如纬度、肥力评级、土壤类型和株数等，覆盖全局默认值。</p>
                                    </div>
                                </div>

                                <div class="step-item">
                                    <div class="step-number">3</div>
                                    <div class="step-content">
                                        <h4>设置营林事件</h4>
                                        <p>添加适用于所有站点的间伐、落叶、肥力和灌溉等管理事件。系统会将这些事件应用于所有选定的站点，模拟统一管理措施下不同站点的响应。</p>
                                    </div>
                                </div>

                                <div class="step-item">
                                    <div class="step-number">4</div>
                                    <div class="step-content">
                                        <h4>保存并提交</h4>
                                        <p>点击"保存并提交"按钮开始多站点模拟。系统会并行处理所有站点的模拟，并生成综合结果页面。</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="help-card">
                            <h3>结果分析</h3>
                            <p>模型运行完成后，系统提供多种工具帮助您分析和解释模拟结果。</p>
                            <div class="ui-guide">
                                <div class="ui-item">
                                    <h4><i class="bi bi-bar-chart"></i> 图表可视化</h4>
                                    <p>系统自动生成交互式折线图，展示随时间变化的关键变量趋势。您可以从所有可用变量中选择最多若干个进行同时显示，进行直观比较和分析。</p>
                                </div>

                                <div class="ui-item">
                                    <h4><i class="bi bi-table"></i> 数据表格</h4>
                                    <p>详细的数据表格显示所有模拟变量的精确数值，支持按需显示或隐藏列，便于关注特定指标。表格中的数据包括时间点、生物量组分、株数和LAI等核心指标。</p>
                                </div>

                                <div class="ui-item">
                                    <h4><i class="bi bi-download"></i> 数据导出</h4>
                                    <p>所有模拟结果均可导出为CSV格式，便于进一步分析或用于报告。对于多站点模拟，系统支持下载单个站点数据或打包所有站点结果。</p>
                                </div>

                                <div class="ui-item">
                                    <h4><i class="bi bi-gear"></i> 参数微调</h4>
                                    <p>分析结果后，您可以返回编辑页面调整参数，进行多次模拟以探索不同条件和管理策略的影响，优化管理决策。</p>
                                </div>
                            </div>
                        </div>

                        <div class="help-card">
                            <h3>常见问题</h3>
                            <div class="faq-list">
                                <div class="faq-item">
                                    <div class="faq-question">
                                        <i class="bi bi-question-circle"></i>
                                        <h4>单站点模拟和多站点模拟该如何选择？</h4>
                                        <i class="bi bi-chevron-down faq-toggle"></i>
                                    </div>
                                    <div class="faq-answer">
                                        <p>如果您需要对单个林分进行详细的生长过程模拟和精细分析，建议使用单站点模拟；如果您需要比较不同站点在相同管理条件下的表现，或进行区域尺度的森林生长预测，则应选择多站点模拟。单站点模拟提供更多参数细节和更灵活的配置，而多站点模拟则更适合宏观比较。</p>
                                    </div>
                                </div>

                                <div class="faq-item">
                                    <div class="faq-question">
                                        <i class="bi bi-question-circle"></i>
                                        <h4>模拟运行时间过长怎么办？</h4>
                                        <i class="bi bi-chevron-down faq-toggle"></i>
                                    </div>
                                    <div class="faq-answer">
                                        <p>运行时间主要受到模拟年数、站点数量和参数复杂度的影响。如果运行时间过长，可以考虑减小结束年龄、减少多站点模拟的站点数量，或简化营林事件设置。对于耗时较长的复杂模拟，建议分批进行，并在非高峰时段运行以获得更好的计算性能。</p>
                                    </div>
                                </div>

                                <div class="faq-item">
                                    <div class="faq-question">
                                        <i class="bi bi-question-circle"></i>
                                        <h4>模拟结果与实际观测不符怎么办？</h4>
                                        <i class="bi bi-chevron-down faq-toggle"></i>
                                    </div>
                                    <div class="faq-answer">
                                        <p>模拟结果与实际观测的差异可能来自多种原因，包括树种参数不准确、站点参数设置不合理、气候数据不具代表性等。建议首先检查输入参数的合理性，特别是树种参数和站点因子。然后，可以通过率定过程（调整关键参数使模拟结果与观测数据更匹配）来提高模拟精度。对于特定林分，可能需要基于实际观测数据对默认参数进行本地化调整。</p>
                                    </div>
                                </div>

                                <div class="faq-item">
                                    <div class="faq-question">
                                        <i class="bi bi-question-circle"></i>
                                        <h4>如何设计更合理的营林事件？</h4>
                                        <i class="bi bi-chevron-down faq-toggle"></i>
                                    </div>
                                    <div class="faq-answer">
                                        <p>营林事件设计应基于林业管理的实际经验和林分特点。对于间伐，通常在林分郁闭后进行，强度根据林分密度和生长状况决定；肥力管理和灌溉应考虑土壤条件和树种需求；落叶管理则多用于模拟病虫害或极端天气的影响。建议通过多次模拟比较不同管理方案的效果，找出最优方案。同时，可以参考相关研究文献和当地林业实践经验来设置更合理的营林事件。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 数据可视化部分 (隐藏) -->
                    <div class="help-section" id="visualization">
                        <!-- 内容省略 -->
                    </div>

                    <!-- 常见问题部分 (隐藏) -->
                    <div class="help-section" id="faq">
                        <div class="help-section-header">
                            <h2><i class="bi bi-question-circle"></i> 常见问题</h2>
                            <p class="section-desc">解答用户在使用过程中遇到的常见问题</p>
                        </div>

                        <div class="help-card">
                            <div class="faq-list">
                                <div class="faq-item">
                                    <div class="faq-question">
                                        <i class="bi bi-question-circle"></i>
                                        <h4>什么是3-PG模型？</h4>
                                        <i class="bi bi-chevron-down faq-toggle"></i>
                                    </div>
                                    <div class="faq-answer">
                                        <p>3-PG(Physiological Principles Predicting Growth)是一个基于生理原理的森林生长预测模型，由澳大利亚科学家开发。该模型使用相对简单的生理过程计算来预测林分生长和产量，适用于多种森林类型的研究和管理。</p>
                                    </div>
                                </div>

                                <div class="faq-item">
                                    <div class="faq-question">
                                        <i class="bi bi-question-circle"></i>
                                        <h4>模拟结果可以导出吗？</h4>
                                        <i class="bi bi-chevron-down faq-toggle"></i>
                                    </div>
                                    <div class="faq-answer">
                                        <p>是的，所有模拟结果都可以导出为CSV文件。在结果页面，点击"导出"按钮选择您需要的格式即可。</p>
                                    </div>
                                </div>

                                <div class="faq-item">
                                    <div class="faq-question">
                                        <i class="bi bi-question-circle"></i>
                                        <h4>模拟时间跨度有限制吗？</h4>
                                        <i class="bi bi-chevron-down faq-toggle"></i>
                                    </div>
                                    <div class="faq-answer">
                                        <p>系统支持最长100年的模拟时间跨度，但请注意模拟时间越长，不确定性也会增加。建议根据您的研究或管理需求选择合适的时间跨度。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部反馈区域 -->
        <div class="feedback-section">
            <div class="row">
                <div class="col-md-8">
                    <h4>这篇帮助文档对您有用吗？</h4>
                    <p>您的反馈将帮助我们改进帮助文档</p>
                </div>
                <div class="col-md-4 text-end">
                    <button class="btn btn-outline-success me-2">
                        <i class="bi bi-hand-thumbs-up"></i> 有用
                    </button>
                    <button class="btn btn-outline-danger">
                        <i class="bi bi-hand-thumbs-down"></i> 没用
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    $(document).ready(function() {
        // 帮助导航项点击事件
        $(".help-nav-item").click(function() {
            // 获取目标帮助部分的ID
            const targetId = $(this).data("target");

            // 移除所有导航项和内容的活跃状态
            $(".help-nav-item").removeClass("active");
            $(".help-section").removeClass("active");

            // 为当前点击的导航项和对应的内容添加活跃状态
            $(this).addClass("active");
            $("#" + targetId).addClass("active");

            // 如果是在移动端，滚动到内容区域顶部
            if(window.innerWidth < 992) {
                $('html, body').animate({
                    scrollTop: $(".help-content").offset().top - 20
                }, 500);
            }
        });

        // FAQ问题点击事件
        $(document).on("click", ".faq-question", function() {
            // 切换当前FAQ项的活跃状态
            $(this).toggleClass("active");
            $(this).parent().toggleClass("active");

            // 平滑展开/收起FAQ答案
            const answer = $(this).next(".faq-answer");
            if($(this).hasClass("active")) {
                answer.slideDown(200);
            } else {
                answer.slideUp(200);
            }
        });

        // 初始化：默认显示第一个FAQ项
        $(".faq-item:first-child .faq-question").addClass("active");
        $(".faq-item:first-child").addClass("active");
        $(".faq-item:first-child .faq-answer").show();

        // 视频教程项点击事件
        $(".video-item").click(function() {
            // 在实际应用中，这里可以弹出视频播放模态窗口
            alert("视频教程播放功能正在开发中。");
        });

        // 搜索框输入事件
        $(".search-box input").on("keyup", function(e) {
            if(e.key === 'Enter') {
                const searchQuery = $(this).val().trim().toLowerCase();
                if(searchQuery) {
                    searchHelpContent(searchQuery);
                }
            }
        });

        // 搜索按钮点击事件
        $(".btn-search").click(function() {
            const searchQuery = $(".search-box input").val().trim().toLowerCase();
            if(searchQuery) {
                searchHelpContent(searchQuery);
            }
        });

        // 反馈按钮点击事件
        $(".btn-outline-success, .btn-outline-danger").click(function() {
            const isHelpful = $(this).hasClass("btn-outline-success");
            const message = isHelpful ?
                "感谢您的反馈！我们很高兴这篇内容对您有所帮助。" :
                "感谢您的反馈！我们将努力改进这篇内容。";

            // 显示反馈信息
            alert(message);

            // 禁用反馈按钮
            $(".btn-outline-success, .btn-outline-danger").prop("disabled", true);
        });

        // 联系支持邮件点击事件
        $(".contact-support a").click(function(e) {
            // 为邮件链接添加当前页面主题信息
            const subject = encodeURIComponent("林序3PG模型可视化系统 - 帮助支持");
            const body = encodeURIComponent("我需要关于以下内容的帮助:\n\n请在此描述您的问题\n\n");
            $(this).attr("href", `mailto:finmzhao@163.com?subject=${subject}&body=${body}`);
        });
    });

    // 帮助内容搜索函数
    function searchHelpContent(query) {
        // 获取所有帮助部分
        const sections = $(".help-section");
        let found = false;

        // 重置搜索状态
        $(".help-nav-item").removeClass("active");
        $(".help-section").removeClass("active");
        $(".search-highlight").each(function() {
            $(this).replaceWith($(this).text());
        });

        // 遍历每个帮助部分
        sections.each(function() {
            const sectionId = $(this).attr("id");
            const sectionText = $(this).text().toLowerCase();

            // 如果在该部分找到搜索词
            if(sectionText.includes(query)) {
                // 激活相应的导航项和内容
                $(".help-nav-item[data-target='" + sectionId + "']").addClass("active");
                $(this).addClass("active");
                found = true;

                // 高亮显示匹配文本
                highlightText($(this), query);

                // 停止搜索
                return false;
            }
        });

        // 如果没有找到匹配内容
        if(!found) {
            alert("抱歉，未找到与 '" + query + "' 相关的帮助内容。");
            // 默认显示第一个帮助部分
            $(".help-nav-item").first().addClass("active");
            $(".help-section").first().addClass("active");
        }
    }

    // 高亮显示搜索结果函数
    function highlightText(container, query) {
        const content = container.html();
        const regex = new RegExp('(' + query + ')', 'gi');
        const highlightedContent = content.replace(regex, '<span class="search-highlight" style="background-color:#DCEDC8;font-weight:bold;">$1</span>');
        container.html(highlightedContent);

        // 滚动到第一个高亮处
        if($(".search-highlight").length > 0) {
            $('html, body').animate({
                scrollTop: $(".search-highlight").first().offset().top - 150
            }, 500);
        }
    }
</script>
</html>